<template>
  <div class="content-wrapper" :class="{full_live:full_live}">
    <component v-if="naked_live" :is="current_com.editor" :ctx="current_com.ctx" v-bind="current_com.ctx"></component>
<!--    <section class="content container-fluid" :class="{'full-content':full_live || naked_live }">-->
    <section v-else class="content container-fluid" :class="{'full-content':full_live }">
      <div  class="flex-v there" style="min-height: 100%;">

        <div v-if="page_label" style="border-left: 3px solid #3e8ebd;padding-left: 1em;margin-bottom: 5px;">
          <b v-text="page_label"></b>
          <span style="display: inline-block;width: 2em;"></span>
          <ol class="breadcrumb" style="display: inline-block;background-color: inherit;margin-bottom: 0;padding: 0"  v-show="pathable_tab_names.length >0 ">
            <li v-for="name in pathable_tab_names"><span v-text="name"></span></li>
          </ol>
          <button type="button"
                  class="btn btn-warning btn-xs"
                  v-show="stack.length > 1"
                  @click="pop_stack()">
            <i class="fa fa-arrow-circle-o-left fa-lg"></i><span>返回</span></button>
        </div>
        <div id="main-page" class="rows-block flex-v flex-grow" >
          <!--<transition name="slide">-->
          <keep-alive :include="alive_list">
            <component :is="current_com.editor" :ctx="current_com.ctx" v-bind="current_com.ctx"></component>
          </keep-alive>
          <!--</transition>-->

        </div>
      </div>

    </section>
  </div>

</template>


<script type="text/javascript">
export default {
  props:{
    editor:{},
    editor_ctx:{},
    naked_live:{},
    full_live:{}
  },
  components:{},
  data () {
    var search_args = ex.parseSearch()
    return {
      page_label:page_label,
      stack: [] , // [{editor: editor, ctx: editor_ctx,label: ''}],
    }
  },
  created(){
    if(window[editor]){
      this.open_live(window[editor],this.editor_ctx)
    }else{
      this.open_com(this.editor,this.editor_ctx)
    }
  },
  methods:{
    pop_stack(obj){
      var com = this.stack.pop()
      if(cfg._tab_call_back.length>0){
        cfg._tab_call_back.pop()(obj)
      }
      Vue.delete(this.$options.components,com)
    },
    open_live(com,ctx,label){
      if (com.basename){
        var com_name = 'dyn-'+com.basename +'-'+ Date.now()
      }else{
        var com_name = 'dyn-'+ Date.now()
      }
      var big_com = {
        mixins:[com],
        name:com_name,
      }
      Vue.set( this.$options.components,com_name,big_com)
      this.stack.push({editor:com_name,ctx:ctx,label:label || com.label || ctx.par_row._label ||  ctx.title  })
    },
    open_com(com_name,ctx,label){
      this.stack.push({editor:com_name,ctx:ctx,label:label||ctx.label || ctx.title })
    }
  },

  computed:{
    current_com(){
      return this. stack[this.stack.length -1 ]
    },
    alive_list(){
      return this.stack.map((item)=>{
        return item.editor
      })
    },
    pathable_tab_names(){
      var names =[]
      ex.each(this.stack.slice(1),function(editor){
        if(editor){
          if(editor.ctx.par_row && editor.ctx.par_row._label){
            names.push( editor.ctx.par_row._label )
          }else{
            names.push(editor.label || editor.ctx.par_row._label )
          }
        }
//                    last_stack = stack
      })
      return names
    }
  }
}

</script>
<style scoped lang="scss">
.content-wrapper {
    //background-color: red;
    position: relative;
    //z-index: 2000 !important;
}
.full_live.content-wrapper{
  margin-left: 0 !important;
}
.container-fluid{
  //background-color: yellow;

  position: absolute;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;

  padding-bottom: 0;
}
.there{

}
</style>

<style lang="scss">
.live-hide{
  display: none;
}

/*@media (min-width: 768px){*/
.wrapper>.on-live-hide.content-wrapper{
  margin-left: 0 !important;
}
/*}*/
.full-content{
  padding: 0;
  padding-left: 0;
  padding-right: 0;
}
#main-page{
  position: relative;
  min-height: calc( 100vh - 110px )
}
.full-content #main-page{
  min-height: calc( 100vh - 50px )
}
.on-live-hide .full-content #main-page{
  min-height: 100vh;
}
section.content{
  overflow: auto;
}

a[disabled] {
  color: gray;
  pointer-events: none;
}
</style>